<template>
  <div>
    <el-alert
      v-if="state"
      title="已通知维修部请您稍后，维修部同事将在您预约的时间提前联系您！！！"
      type="success"
      effect="dark"
    />
    <div class="content">
      <el-form
        ref="form"
        :model="sizeForm"
        label-width="80px"
        size="mini"
        class="addOrder-form"
      >
        <el-form-item label="选择楼栋">
          <el-cascader
            v-model="house"
            :options="optionsUser"
            placeholder="请选择用户地址"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item label="报修类型">
          <el-select
            v-model="sizeForm.type"
            placeholder="请选择报修类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="报修内容">
          <el-input
            v-model="sizeForm.content"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 8 }"
          />
        </el-form-item>

        <el-form-item label="维修时间">
          <div class="block">
            <el-date-picker
              v-model="sizeForm.time1"
              type="datetime"
              style="width: 100%"
              placeholder="方便上门维修的时间"
            />
          </div>
        </el-form-item>
        <!-- 上传图片 -->
        <div style="text-align: center">
          <el-upload
            ref="upload"
            class="upload-demo"
            action="/resource/orders/upLoad"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-preview="handlePictureCardPreview"
            :file-list="fileList"
            :limit="3"
            multiple
            :on-exceed="handleExceed"
            :data="ordersId"
            :auto-upload="false"
          >
            <el-button
              slot="trigger"
              size="small"
              type="primary"
            >上传图片</el-button>
            <el-button
              style="margin-left: 10px"
              size="small"
              type="success"
              @click="submitUpload"
            >上传订单</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import ordersApi from '../../api/orders'
import houseApi from '../../api/house'

export default {
  data() {
    return {
      state: false,
      sizeForm: {
        content: '',
        type: '',
        time1: ''
      },
      house: '',
      fileList: [],
      ordersId: { _id: '' },
      dialogImageUrl: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      optionsUser: [],
      options: [],
      imgs: []
    }
  },
  async mounted() {
    this.getHouse()
    await this.$store.dispatch('orders/getTypeInfo')
    //  从store获取数据type数据
    const type = this.$store.state.orders.typeInfo
    type.map((item) => {
      this.options.push({
        value: item._id,
        label: item.name
      })
    })
  },

  methods: {
    async onSubmit() {},
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },

    // 生成订单
    async submitUpload() {
      this.sizeForm.house = this.house[1]
      const data = await ordersApi.addOrders(this.sizeForm)
      this.ordersId._id = data._id
      await this.$refs.upload.submit()
      this.state = true
    },
    handleRemove(file, fileList) {
      console.log(`1111`, file.url)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
    },

    async getHouse() {
      const house = await houseApi.getBuilding()
      this.optionsUser = house.map((item) => {
        item.children = item.children.map((item1) => {
          item1.value = item1._id
          return item1
        })
        return item
      })
    }
  }
}
</script>

<style scoped>
.content {
  width: 50%;
  margin: 30px auto;
}
.addOrder-form {
  width: 80%;
  margin: 30px auto;
}

.upload-content {
  width: 40%;
  margin: auto;
}

.upLoadBtn {
  text-align: center;
  margin: auto;
}
</style>
